<template>
	<view>
		<view class="top flexs">
			<image class="bg" src="../../static/image/bj_huiyuan_48.png"></image>
			<view class="topa flexs">
				<image class="head" :src="avatar || '../../static/image/bg_img.png'"></image>
				<view class="topa_right">
					<view class="name flexs">{{nickname}}
						<image v-if="stus == 1" class="vip" src="../../static/image/v.png"></image>
					</view>
					<view v-if="stus == 0" class="stus">暂未开通VIP</view>
					<view v-if="stus == 1" class="stus">您已开通VIP</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="list flexs">
				<view class="bold">VIP可享特权</view>
			</view>
			<view class="list flexs" @tap="showModal" data-target="DialogModal1">
				<view class="lista flexs">
					<image class="icons" src="../../static/image/haoyou.png"></image>
					<view>一键克隆好友</view>
				</view>
				<image class="fanhui" src="../../static/image/fanhui_21.png"></image>
			</view>
			<view class="list flexs" @click="daoru">
				<view class="lista flexs">
					<image class="icons" src="../../static/image/txl.png"></image>
					<view>一键导入通讯录</view>
				</view>
				<image class="fanhui" src="../../static/image/fanhui_21.png"></image>
			</view>
			<view class="list flexs">
				<view class="lista flexs" @click="daoru">
					<image class="icons" src="../../static/image/haoyou_49.png"></image>
					<view>一键添加通讯录好友</view>
				</view>
				<image class="fanhui" src="../../static/image/fanhui_21.png"></image>
			</view>
			<view class="list flexs" @tap="showModal" data-target="kelongqun">
				<view class="lista flexs">
					<image class="icons" src="../../static/image/qun_48.png"></image>
					<view>一键克隆群</view>
				</view>
				<image class="fanhui" src="../../static/image/fanhui_21.png"></image>
			</view>
			<view class="list flexs">
				<view class="lista flexs" @tap="qunfa">
					<image class="icons" src="../../static/image/qunfa_49.png"></image>
					<view>一键群发</view>
				</view>
				<image class="fanhui" src="../../static/image/fanhui_21.png"></image>
			</view>
		</view>
		<view class="content contenta" v-if="stus == 0">
			<view class="list flexs">
				<view class="bold">开通会员</view>
				<view class="reds">￥9</view>
			</view>
			<image class="btns" src="../../static/image/lijikaitong.png"></image>
		</view>
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="bg-white tits">
					<view>一键克隆好友</view>
				</view>
				<view class="padding-xl">
					<view class="cons"><input type="number" v-model="fcount" placeholder="请输入账号"/></view>
					<view class="cons"><input type="password" v-model="fpwd" placeholder="请输入密码"/></view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="kelongFriend">确定</button>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='kelongqun'?'show':''">
			<view class="cu-dialog">
				<view class="bg-white tits">
					<view>一键克隆群</view>
				</view>
				<view class="padding-xl">
					<view class="cons"><input type="number" v-model="qcount" placeholder="请输入账号"/></view>
					<view class="cons"><input type="password" v-model="qpwd" placeholder="请输入密码"/></view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="kelongqun">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stus: '',
				avatar: '',
				nickname: '',
				modalName: null,
				qcount:'',
				qpwd:'',
				fcount:'',
				fpwd:''
			}
		},
		onShow() {
			this.$msgchat.initwork();
		},
		onLoad() {
			this.initDat();
		},
		methods: {
			showModal(e) {
				if(this.stus == 0){
					uni.showModal({
					    title: '',
					    content: '您还不是VIP，请先开通VIP',
					    success: function (res) {
					        if (res.confirm) {
					        } else if (res.cancel) {
					        }
					    }
					});
				}else{
					this.modalName = e.currentTarget.dataset.target
				}
			},
			hideModal(e) {
				this.modalName = null
			},
			//一件群发
			qunfa(){
				if(this.stus == 0){
					uni.showModal({
					    title: '',
					    content: '您还不是VIP，请先开通VIP',
					    success: function (res) {
					        if (res.confirm) {
					        } else if (res.cancel) {
					        }
					    }
					});
				}else{
					uni.redirectTo({
						url:'../groupSend/groupSend'
					})
				}
			},
			initDat() {
				this.$common.requests('/api/user/is_vip').then(res => {
					if (res.data.code == 1) {
						if (res.data.data.avatar != '') {
							this.avatar = this.$common.baseUrl + res.data.data.avatar
						}
						this.nickname = res.data.data.nickname;
						this.stus = res.data.data.is_vip;
					}
				})
			},
			daoru(){
				if(this.stus == 0){
					uni.showModal({
					    title: '',
					    content: '您还不是VIP，请先开通VIP',
					    success: function (res) {
					        if (res.confirm) {
					        } else if (res.cancel) {
					        }
					    }
					});
				}else{
					uni.redirectTo({
						url:'../selectContacts/selectContacts'
					})
				}
			},
			kelongqun(){
				var obj = {
					account : this.qcount,
					password : this.qpwd
				}
				this.$common.requests('/api/Group/clonegroup', obj).then(res => {
					this.modalName = null
					this.$api.msg(res.data.msg)
				})
			},
			kelongFriend(){
				var obj = {
					account : this.fcount,
					password : this.fpwd
				}
				this.$common.requests('/api/friend/vipyijianfriend', obj).then(res => {
					this.modalName = null
					this.$api.msg(res.data.msg)
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F5F4F9;
	}

	.top {
		width: 100%;
		height: 200upx;
		position: relative;
	}

	.flexs {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.topa {
		padding: 0 30upx;
		z-index: 99;
	}

	.head {
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
	}

	.topa_right {
		padding-left: 20upx;
	}

	.name {
		color: #FFF;
	}

	.stus {
		color: #C7C5C5;
		font-size: 28upx;
		padding-top: 15upx;
	}

	.vip {
		width: 35upx;
		height: 30upx;
		margin: 0 15upx;
	}

	.content {
		background: #FFF;
		padding: 30upx;
	}

	.list {
		padding: 20upx 0;
		justify-content: space-between !important;
	}

	.icons {
		width: 90upx;
		height: 90upx;
		margin-right: 25upx;
	}

	.fanhui {
		width: 20upx;
		height: 30upx;
	}

	.contenta {
		margin-top: 25upx;
	}

	.bold {
		font-weight: 600;
	}

	.reds {
		color: #F01C52;
		font-size: 30upx;
	}

	.btns {
		width: 100%;
		height: 80upx;
		margin-top: 20upx;
	}
	.text-green, .line-green, .lines-green {
	    color: #4C68FF;
	}
	.bg-green {
	    background-color: #4C68FF;
	}
	.cons{
		width: 100%;
		padding: 30upx 0!important;
	}
	.cons input{
		width: 100%!important;
		border-bottom: 1px solid gray!important;
		
		text-align: left!important;
	}
	.tits{
		padding: 30upx 0;
	}
</style>
